<template>
  <div class="vip_build_container">
    <!-- 生日月份和vip选择框区域 -->
    <div class="birthday_vip">
      <!-- 生日下拉框 -->
      <div class="birthday">
        <span>生日月份</span>
        <el-date-picker
          v-model="dataPickerSelectValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <!-- <el-date-picker
          v-model="dataPickerSelectValue"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker> -->
        <!-- <el-select
          v-model="monthPullSelectValue"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in monthPullSelectValueList"
            :key="item.value"
            :label="item.label"
            :value="item.value + '月'"
          >
          </el-option>
        </el-select> -->
      </div>
      <!-- vip下拉框 -->
      <div class="vip">
        <span>VIP</span>
        <el-select
          v-model="vipPullSelectValue"
          filterable
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in vipPullSelectValueList"
            :key="index"
            :label="item.phone + '  ' + item.name"
            :value="item.phone"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 中间一条有长度的灰色的线 -->
    <p class="inline"></p>
    <!-- 按钮区域 -->
    <div class="button_container">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="handleNewBuildBtnClick"
        >新建</el-button
      >
      <el-button icon="el-icon-search" size="small" @click="handleQueryBtnClick"
        >查询</el-button
      >
      <el-button
        icon="el-icon-lock"
        size="small"
        @click="modifyPasswordBtnClick"
        >修改密码</el-button
      >
      <el-button
        icon="el-icon-delete"
        size="small"
        @click="delete_current_rowDataApi"
        >删除</el-button
      >
    </div>
    <!-- table表格区域 -->
    <div class="table_container">
      <el-table
        height="70vh"
        :data="tableData"
        style="width: 100%"
        :cell-style="{ padding: 0, height: '30px' }"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        highlight-current-row
        @row-dblclick="handleTableRowDbClick"
        @row-click="handleTableRowClick"
      >
        <el-table-column
          prop="phone"
          label="VIP卡号"
          width="150px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户简称"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="cardName"
          label="卡别"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="discount"
          label="折数"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="integralNumber"
          label="积分"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 下面这个四个字段还没有 -->
        <el-table-column
          prop="recharge"
          label="充值金额"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="sendMoney"
          label="赠送金额"
          align="center"
          show-overflow-tooltip
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="balance"
          label="余额"
          align="center"
          width="150px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="consumeMoney"
          label="消费金额"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="birthdayYearMonth"
          label="生日"
          width="100px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="likeColor"
          label="喜好颜色"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="suitableSize"
          label="合适尺码"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="personnelName"
          label="营业员"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="cellPhoneNumber"
          label="手机号"
          width="150px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="addressArea"
          label="地址"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="300px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          align="center"
          width="150px"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="page_container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[20, 40, 60, 80]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 点击新建和双击表格的时候，弹出的对话框 -->

    <VipFilingDialog
      v-if="isShowDialog"
      :monthPullSelectValueList="monthPullSelectValueList"
      :title="title"
      :tableRowData="tableRowData"
      @closeDialog="closeDialog"
      @upDataPageDataFatherComponentsData="handleQueryBtnClick"
      @tableDataIsHaveData="tableDataIsHaveData"
    ></VipFilingDialog>
    <!-- 修改密码组件 -->
    <ModifyPasswordFei
      v-if="isShowModifyPasswordDialog"
      :tableRowData="tableRowData"
      @closeModifyPasswordDialog="isShowModifyPasswordDialog = false"
    />
  </div>
</template>

<script>
// 引入格式化时间的模块
var moment = require('moment')
// 接口api引入
import {
  get_vip_dataApi,
  queryAllVipDataApi,
  delete_current_rowDataApi
} from '../../../../../request/store/store_baseInfo_request.js'

// 点击新建弹出框组件的引入
import VipFilingDialog from './VipFilingDialog.vue'
// 修改密码组件
import ModifyPasswordFei from './ChildComps/ModifyPasswordFei.vue'
export default {
  data() {
    return {
      // 生日选中的值
      dataPickerSelectValue: null,
      // 显示忘记密码的对话框
      isShowModifyPasswordDialog: false,
      // 默认显示第一页
      currentPage4: 1,
      limit: 20, // 分页条数
      page: 1, // 分页数
      total: 0,
      // 控制表格的高度
      tableHeight: '',
      // 传给子组件的title
      title: '新建',
      // options: [],
      // 双击表格的时候，要给子组件的数据
      tableRowData: '',

      // 月份下拉框选中的值和数组,同时这个数组，也直接传递给dialog
      monthPullSelectValue: '',
      monthPullSelectValueList: [
        { value: 1, label: '1月' },
        { value: 2, label: '2月' },
        { value: 3, label: '3月' },
        { value: 4, label: '4月' },
        { value: 5, label: '5月' },
        { value: 6, label: '6月' },
        { value: 7, label: '7月' },
        { value: 8, label: '8月' },
        { value: 9, label: '9月' },
        { value: 10, label: '10月' },
        { value: 11, label: '11月' },
        { value: 12, label: '12月' }
      ],
      // vip下拉框选中的值和数组
      vipPullSelectValue: '',
      vipPullSelectValueList: [],
      //   表格数据，里面是完整的数据
      tableData: [],
      //   单击表格的时候，用来保存当前row的用户id，以供删除
      toDeleteId: '',
      // 控制弹出层是否显示
      isShowDialog: false
    }
  },
  created() {
    console.log(this.$route)
    // 进入这里逻辑证明是点击店铺销售来的
    if (this.$route.query.id == -1000) {
      // 显示新建对话框
      this.isShowDialog = true
      // vuex里面需要放在顶部显示的对象
      const obj = {
        label: '基础信息表',
        name: 'store_basic_info',
        path: '/stores/store_basic_info'
      }
      // 触发vuex
      this.$store.commit('addNav', obj)
    }
    //  一进入页面就获取所有的vip信息，供下拉框渲染，获取所有的vip客户列表
    this.get_vip_dataApi()
  },

  methods: {
    /*
        修改密码被点击的时候，触发的函数
    */
    modifyPasswordBtnClick() {
      console.log('modifyPasswordBtnClick')
      if (Object.keys(this.tableRowData).length === 0)
        return this.$message.warning('请选择要修改密码的vip')
      this.isShowModifyPasswordDialog = true
    },
    // 每页显示多少条发生概不的时候，触发的函数
    handleSizeChange(pageSize) {
      console.log('我是handleSizeChange')
      // 直接改全局显示多少条数据就行
      this.limit = pageSize
      this.handleQueryBtnClick()
    },
    handleCurrentChange(page) {
      this.page = page
      this.handleQueryBtnClick()
    },
    //一进入页面就获取所有的vip信息，供下拉框渲染，获取所有的vip客户列表
    async get_vip_dataApi() {
      const { data: res } = await get_vip_dataApi({
        directSaleNo: this.$store.state.currentStoreData.no
      })
      console.log(res, 'get_vip_dataApi')
      //   //   获取失败,自己提示用户,并且直接return
      if (!res) {
        return this.$message.warning('网络错误，请稍后再试')
      }
      if (res.code !== 200) return this.$message.error('获取用户数据失败')
      //   获取成功拿到所有vip的数据赋给vip下拉框
      this.vipPullSelectValueList = res.data
      //   //   深拷贝一份res
      //   const cloneData = JSON.parse(JSON.stringify(res.data)) || [];
      //   //   console.log(cloneData);
      //   // 遍历clone的数组
      //   cloneData.forEach((item) => {
      //     //   拼接对象，点击查询的时候，后端只需要phone,显示的时候，要手机和名字显示
      //     const newObj = {
      //       phone: item.phone,
      //       label: item.phone + " " + item.name,
      //     };
      //     // 这个vip下拉框的数据
      //     this.arr.push(newObj);
      //     // this.options.push(newObj);
      //     // console.log(newObj);
      //   });
      //   console.log(this.arr);
    },

    // 点击查询按钮的时候，触发的函数
    async handleQueryBtnClick() {
      console.log(this.dataPickerSelectValue)

      // 在这里直接拼接后端要的参数
      const paramsObj = {
        // birthdayMonth: this.dataPickerSelectValue, // 生日月份
        startTime: this.dataPickerSelectValue
          ? this.dataPickerSelectValue[0] + ' ' + '00:00:00'
          : '',
        endTime: this.dataPickerSelectValue
          ? this.dataPickerSelectValue[1] + ' ' + '23:59:59'
          : '',
        directSaleNo: this.$store.state.currentStoreData.no, // 直营店编号
        vip: this.vipPullSelectValue, // vip
        page: this.page,
        limit: this.limit
      }
      console.log('点击查询的数据参数', paramsObj)
      const { data: res } = await queryAllVipDataApi(paramsObj)
      console.log('点击查询的数据', res)
      if (res.code === 200 && res.data.length === 0) {
        this.$message.warning('暂无数据')
        this.tableData = []
        return
      }

      // res 返回的是undefined或者不成功，都直接提示这个
      if (!res || res.code !== 200)
        return this.$message({
          type: 'warning',
          message: res.msg
        })

      /*
          修改后端返回来的数据时间格式
      */

      res.data.map((item) => {
        // 遍历返回来的数组
        for (const key in item) {
          // 遍历每一个数组项 --> 对象
          if (
            // 条件越多越准确
            (item.createTime || item.updateTime) &&
            (item.createTime === item[key] || item.updateTime === item[key])
          ) {
            // 创建一个时间对象
            const data = new Date(item[key])
            // 格式化之后，要重新给原来的赋值一个新的时间
            item[key] = moment(data).format('YYYY-MM-DD')
          }
        }
      })
      this.total = res.total
      // 成功之后，直接赋值给表格
      this.tableData = res.data
    },
    // 当表格某一行被双击的时候，触发这个事件
    handleTableRowDbClick(row, column, event) {
      // 要拿到一行的数据才行
      // 1. 改变子组件的标题
      this.title = '编辑' // 子组件判断这个，如果是编辑的话，那么就是双击的，这个时候，应该要拿这个数据，不能用自己的数据
      // 2.拿到这一行的数据，给子组件展示
      this.tableRowData = row
      // 3. 显示对话框
      this.isShowDialog = true

      // console.log(this.tableRowData);
    },
    /*
        表格被单击的时候，触发这个函数，并且拿到这一行的id
    */
    handleTableRowClick(row) {
      // console.log(row.id);
      this.toDeleteId = row.id
      // 拿到这一行的数据，给修改密码
      this.tableRowData = row
    },
    // 点击删除按钮的时候，删除选中的当前行
    async delete_current_rowDataApi() {
      // 判断是否选中要删除的数据
      console.log(this.toDeleteId)
      if (this.toDeleteId === '')
        return this.$message.warning('请选择要删除的数据')
      // 提示用户是否删除
      this.$confirm('确定要删除改数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await delete_current_rowDataApi(this.toDeleteId)
          // console.log(res);
          // 如果不成功，直接return
          if (res.code !== 200) {
            return
          }
          // 如果删除成功的话，直接在原来的数组中，找到这一项删除，这样就不用在次请求
          const index = this.tableData.findIndex(
            (item) => item.id === this.toDeleteId
          )
          // console.log(index);
          //   找到对应的索引直接删除要删除项
          this.tableData.splice(index, 1)
          // 提示用户删除成功
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /*
        点击这个新建按钮的时候，触发的函数
    */
    handleNewBuildBtnClick() {
      // 点击新建的时候，显示的对话框
      this.title = '新建'
      // 对话框中的积分页数可以输入的， 不用也行，用的话，那么积分也是要父组件传过去才行
      // this.isForbiddenJiFenInput = false;
      this.isShowDialog = true
    },

    // 监听子组件点击关闭图标的时候，触发的函数
    closeDialog() {
      this.isShowDialog = false
    },

    // 定义一个监听子组件方法，当新建的时候，点击保存和继续录入可以更新数据的方法，表格有数据的时候，可以
    tableDataIsHaveData() {
      if (this.tableData.length !== 0) {
        // 不等于0，证明是有数据的，调用查询按钮的方法，更新数据
        // console.log(this.tableData.length);
        this.handleQueryBtnClick()
        // 并且更新vip下拉框的数据
        this.get_vip_dataApi()
      } else {
        // 并且更新vip下拉框的数据
        this.get_vip_dataApi()
        return
      }
    }
  },
  components: {
    VipFilingDialog,
    ModifyPasswordFei
  }
}
</script>

<style lang="less" scoped>
// 单个时间选择器（单个）
// 时间选择器的样式
// /deep/.el-date-editor {
//   width: 150px;
//   height: 32px;
//   .el-input__inner {
//     height: 32px;
//   }
//   .el-input__icon {
//     line-height: 35px;
//   }
// }
// 解决要刷新才能显示的问题
.table_container {
  height: 70vh;
}
// 时间的样式
// 时间选择器的样式（双个）
/deep/.el-date-editor {
  width: 300px;
  height: 32px;
  // 修改关闭小图标的
  .el-range__close-icon {
    line-height: 30px !important;
  }
  .el-input__icon {
    line-height: 35px;
  }
  // 在这个高度上，调整这个时钟icon的行高居中
  .el-range__icon {
    line-height: 27px;
  }
  // 在这个高度上调整这个 '至'显示居中
  .el-range-separator {
    line-height: 26px;
    width: 8%;
  }
}
// 容器
.vip_build_container {
  background-color: #fff;
  min-width: 1200px;
  // 新增
  height: 100%;
  width: 100%;
  //所有下拉框容器
  .birthday_vip {
    display: flex;
    font-size: 16px;
    margin-bottom: 16px;
    span {
      margin-right: 7px;
    }
    .el-select {
      width: 160px;
      height: 32px;
      /deep/.el-input {
        height: 32px;
        .el-input__inner {
          height: 32px;
        }
        // 解决下拉框高度改变之后，下拉箭头小图标不对齐
        .el-input__icon {
          line-height: unset;
        }
      }
    }
    .vip {
      margin-left: 16px;
    }
  }
  // 中间的线
  .inline {
    width: 100%;
    height: 1px;
    background: #f6f6f6;
  }
  // 按钮的容器
  .button_container {
    margin-bottom: 16px;
    margin-top: 16px;
    /* 统一按钮的字体大小 */
    .el-button {
      // 按钮里面的字体统一是14px
      font-size: 14px;
    }
  }
}
// 分页的样式
.page_container {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  /deep/.el-input--suffix {
    .el-input__inner {
      width: 100px;
    }
  }
}
</style>
